<ngm-splitter [type]="SplitterType.Vertical" class="flex-1">
    <ngm-splitter-pane size="50%">
      @if (expression()) {
        <div class="w-full h-full">
            <ngm-editor-sql #editor class="w-full h-full"
                [ngModel]="expression()"
                (ngModelChange)="changeExpression($event)"
                />
        </div>
    } @else {
        <pac-model-er class="w-full h-full" tabindex="0"></pac-model-er>
    }
    </ngm-splitter-pane>

    <ngm-splitter-pane size="50%" class="flex flex-col">
        <div class="flex items-center gap-4 px-2 py-1" displayDensity="compact">
            <span class="">
                {{ 'PAC.MODEL.ENTITY.SourceFields' | translate: {Default: "Source Fields"} }}
            </span>

          @if (isSQLSource$ | async) {
            <button [disabled]="visibleEmpty()" mat-button displayDensity="compact" class="opacity-50 hover:opacity-100"
                [matTooltip]=" 'PAC.MODEL.ENTITY.OnekeyGenerateModel' | translate: {Default: 'One-key generate model by table fields'} "
                matTooltipPosition="above"
                (click)="generate()">
                <mat-icon fontSet="material-icons-round">auto_fix_high</mat-icon>
                <span>
                    {{ 'PAC.MODEL.ENTITY.OnekeyGeneration' | translate: {Default: "One-key Generation"} }}
                </span>
            </button>

            <button [disabled]="visibleEmpty()" mat-button displayDensity="compact" class="opacity-50 hover:opacity-100"
                [matTooltip]=" 'PAC.MODEL.ENTITY.CreateDimension' | translate: {Default: 'Create dimension'} "
                matTooltipPosition="above"
                (click)="createDimension()">
                <mat-icon fontSet="material-icons-round">tag</mat-icon>
                <span>
                    {{ 'PAC.MODEL.ENTITY.CreateDimension' | translate: {Default: "Create an dimension"} }}
                </span>
            </button>
          }

          @if (isXmla$ | async) {
            <button [disabled]="visibleEmpty()" mat-button displayDensity="compact" class="opacity-50 hover:opacity-100"
                [matTooltip]=" 'PAC.MODEL.ENTITY.OnekeySyncModel' | translate: {Default: 'One-key sync model by source cube defination'} "
                matTooltipPosition="above"
                (click)="sync()">
                <mat-icon>auto_fix_high</mat-icon>
                <span>
                    {{ 'PAC.MODEL.ENTITY.OnekeySync' | translate: {Default: "One-key Sync"} }}
                </span>
            </button>
          }

            <mat-checkbox displayDensity="cosy" [indeterminate]="visibleIndeterminate()" [ngModel]="allVisible()"
                (ngModelChange)="toggleVisibleAll($event)">
                {{ 'PAC.MODEL.ENTITY.SelectAll' | translate: {Default: "Select All"} }}
            </mat-checkbox>
        </div>
        <ngm-splitter class="flex-1" [type]="SplitterType.Horizontal" size='20rem'>
            <ngm-splitter-pane minSize="35px" size="50%" class="pac-model__sub-area flex flex-col">
                <div class="pac-sub-toolbar px-2 pt-2 flex justify-between items-center" displayDensity="compact">
                    <span class="leading-tight text-sm">
                        {{ 'PAC.MENU.DIMENSIONS' | translate: {Default: "Dimensions"} }}
                    </span>
                </div>
            
                <div id="list-table-dimensions" class="pac-model__sub-area-content pac-cdk-drop__list flex-1 flex flex-col overflow-hidden hover:overflow-y-auto"
                    cdkDropList
                    [cdkDropListData]="dimensions()"
                    [cdkDropListEnterPredicate]="dropEnterPredicate"
                    (cdkDropListDropped)="dropProperty($event)">
                    <mat-list displayDensity="compact">
                      @for (property of dimensions(); track property.name) {
                        <mat-list-item class="flex justify-between"
                            cdkDrag
                            [cdkDragData]="property"
                            (cdkDragReleased)="onDragReleased($event)">
                            <div matLine>
                                <div class="flex justify-between items-center gap-2">
                                    <mat-checkbox class="flex-1" [ngModel]="property.visible" (ngModelChange)="toggleDimVisible(property, $event)">
                                        <ngm-entity-property class="flex-1" [property]="property" hiddenIcon></ngm-entity-property>
                                    </mat-checkbox>

                                    <span class="pac-data-type-tag">{{property.dataType}}</span>
                                </div>
                            </div>
                        </mat-list-item>
                      }
                    </mat-list>
                  @if (loading()) {
                    <div class="absolute top-1/2 left-1/2 -ml-2 -mt-2 flex">
                        <mat-progress-spinner color="accent" mode="indeterminate" [diameter]="23" [strokeWidth]="2" />
                    </div>
                  }
                </div>
            </ngm-splitter-pane>
            <ngm-splitter-pane minSize="70px" size="50%" class="flex flex-col">
                <div class="pac-sub-toolbar px-2 pt-2 flex justify-between items-center" displayDensity="compact">
                    <span class="leading-tight text-sm">{{ 'PAC.MENU.MEASURES' | translate: {Default: "Measures"} }}</span>
                </div>
                
                <div id="list-table-measures" class="pac-model__sub-area-content pac-cdk-drop__list flex-1 flex flex-col overflow-hidden hover:overflow-y-auto"
                    cdkDropList
                    [cdkDropListData]="measures()"
                    [cdkDropListEnterPredicate]="dropEnterPredicate"
                    (cdkDropListDropped)="dropProperty($event)">
                    <mat-list displayDensity="compact">
                      @for (property of measures(); track property.name) {
                        <mat-list-item class="flex justify-between"
                            cdkDrag
                            [cdkDragData]="property"
                            (cdkDragReleased)="onDragReleased($event)"
                            >
                            <div matLine>
                                <div class="flex justify-between items-center gap-2">
                                    <mat-checkbox class="flex-1" [ngModel]="property.visible" (ngModelChange)="toggleMeasureVisible(property, $event)">
                                        <ngm-entity-property class="flex-1" [property]="property" hiddenIcon />
                                    </mat-checkbox>
                                    <span class="pac-data-type-tag">{{property.dataType}}</span>
                                </div>
                            </div>
                        </mat-list-item>
                      }
                    </mat-list>

                  @if (loading()) {
                    <div class="absolute top-1/2 left-1/2 -ml-2 -mt-2 flex">
                        <mat-progress-spinner color="accent" mode="indeterminate" [diameter]="23" [strokeWidth]="2" />
                    </div>
                  }
                </div>
            </ngm-splitter-pane>
        </ngm-splitter>
    </ngm-splitter-pane>
</ngm-splitter>

<mat-menu #tableMenu="matMenu" class="ngm-density__compact">
    <ng-template matMenuContent let-table="table">
        <button mat-menu-item ngmAppearance="danger" (click)="removeTable(table)">
            <mat-icon>delete_forever</mat-icon>{{'PAC.KEY_WORDS.REMOVE' | translate: {Default: "Remove"} }}
        </button>
    </ng-template>
</mat-menu>

<mat-menu #joinMenu="matMenu" class="pac-cube__join-menu">
    <ng-template matMenuContent let-table="table">
        <div (click)="$event.preventDefault();$event.stopPropagation()" *ngIf="selectTableJoin(table) | async as tableJoin">
            <div class="flex justify-around items-center">
    
                <div class="table-join" [ngClass]="{selected: tableJoin.type === 'Left'}" (click)="changeJoinType(table, 'Left')">
                    <span class="join-icon left-join-icon"></span>
                </div>
    
                <div class="table-join" [ngClass]="{selected: tableJoin.type === 'Inner'}" (click)="changeJoinType(table, 'Inner')">
                    <span class="join-icon inner-join-icon"></span>
                </div>
    
                <div class="table-join" [ngClass]="{selected: tableJoin.type === 'Right'}" (click)="changeJoinType(table, 'Right')">
                    <span class="join-icon right-join-icon"></span>
                </div>
    
            </div>
    
            <mat-divider></mat-divider>
    
            <div class="join-fields-form flex flex-col justify-start items-stretch" displayDensity="compact">
    
                <div *ngFor="let joinField of tableJoin.fields;index as i; first as isFirst; last as isLast"
                    class="join-field-item flex justify-around items-end">
                    
                    <ngm-input [label]="'PAC.MODEL.ENTITY.LeftKey' | translate: {Default: 'Left Key'}"
                        [ngModel]="joinField.leftKey" (ngModelChange)="changeLeftKey(table, i, $event)"
                        [options]="fectTableFieldOptions()"
                        [valueKey]="'key'"
                        (click)="$event.preventDefault();$event.stopPropagation()">
                        <ng-template ngmOptionContent let-field="value">
                            <ngm-entity-property [property]="field"></ngm-entity-property>
                        </ng-template>
                    </ngm-input>
    
                    <div class="fit-form-field">
                        {{'PAC.MODEL.ENTITY.Equal' | translate: {Default: "Equal"} }}
                    </div>

                    <ngm-input [label]="'PAC.MODEL.ENTITY.RightKey' | translate: {Default: 'Right Key'}"
                        [ngModel]="joinField.rightKey" (ngModelChange)="changeRightKey(table, i, $event)"
                        [options]="selectTableType(table) | async"
                        [valueKey]="'key'"
                        (click)="$event.preventDefault();$event.stopPropagation()">
                        <ng-template ngmOptionContent let-field="value">
                            <ngm-entity-property [property]="field"></ngm-entity-property>
                        </ng-template>
                    </ngm-input>
    
                    <button *ngIf="isFirst" class="fit-form-field" mat-button (click)="addJoinField(table)">
                        <mat-icon>add</mat-icon>
                    </button>

                    <button *ngIf="!isFirst" class="fit-form-field" displayDensity="compact" mat-button (click)="removeJoinField(table, i)">
                        <mat-icon>close</mat-icon>
                    </button>
                </div>
    
            </div>
        </div>
    </ng-template>

</mat-menu>
